<template>
  <div class="wrapper">
    <div class="toptab">
      <span class="span"
        >南阳师范学院<i class="el-icon-chat-line-round"></i
      ></span>
      <div class="menu">
        <el-menu
          :default-active="'/homePage'"
          router
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          text-color="#ccc"
          active-text-color="#127febc2"
        >
          <el-menu-item index="/homePage" key="/homePage"
            ><i class="el-icon-s-home"></i>首页</el-menu-item
          >
          <!-- <el-menu-item index="/tu2" key="/tu2" ><i class="el-icon-question"></i>问题</el-menu-item>
  <el-menu-item index="/tu3" key="/tu3" ><i class="el-icon-s-order"></i>帖子</el-menu-item>
  <el-menu-item index="/tu4" key="/tu4"><i class="el-icon-magic-stick"></i>思绪</el-menu-item>
  <el-menu-item index="/tu5" key="/tu5"><i class="el-icon-s-promotion"></i>分享</el-menu-item>
  <el-menu-item index="/tu6" key="/tu6"><i class="el-icon-info"></i>公告</el-menu-item> -->
        </el-menu>
      </div>

      <div class="search">
        <el-input
          placeholder="请输入内容"
          v-model="inputs"
          class="input-with-select"
          clearable
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search(inputs)"
          ></el-button>
        </el-input>
      </div>
      <div class="user">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <div class="userimg">
              <el-avatar
                shape="square"
                :size="30"
                :fit="img"
                :src="url"
              ></el-avatar>
            </div>
            <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a" icon="el-icon-user-solid"
              >个人主页</el-dropdown-item
            >
            <el-dropdown-item command="b" icon="el-icon-s-tools"
              >设置</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="tiez">
        <el-row>
          <router-link :to="'/fatie'">
            <el-tooltip effect="dark" content="发帖" placement="bottom">
              <el-button type="info" icon="el-icon-message" circle></el-button>
            </el-tooltip>
          </router-link>
        </el-row>
      </div>
    </div>
    <div class="content">
      <div class="con_text">
        <transition name="move" mode="out-in">
          <keep-alive Props="exclude">
            <router-view v-if="isRouterAlive"> </router-view>
          </keep-alive>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      isRouterAlive: true,
      user: "",
      inputs: "", //搜索内容
      img: "fill",
      url: "https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/baike/s%3D600%3Bq%3D50/sign=ac9b3402262eb938e86d79f2e559f408/cefc1e178a82b901b2ecf4d07a8da9773812ef94.jpg",
    };
  },
  created(){
     this.url=sessionStorage.getItem("userUrl")
     this.$router.push("/homePage")

  },
  mounted() {
    this.getData();
  },
  methods: {
    //获取用户信息
    getData1() {
      const code = sessionStorage.getItem("userCode");
      this.user = this.$route.query.user;
      console.log(sessionStorage.getItem("userUrl"));
      this.url = sessionStorage.getItem("userUrl");
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },

    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    search(val) {
      this.inputs = "";
      this.$emit("getData");
      this.$router.push({
        path: "/search",
        name: "search",
        query: {
          inputContent: val,
        },
      });
    },
    //下拉菜单
    handleCommand(command) {
      // this.$message('click on item ' + command);
      if (command == "a") {
        this.$router.push("/userindex");
      }
      if (command == "b") {
        this.$router.push("/edit");
      }
      if (command == "e") {
        this.$router.replace("/");
      }
      if (command == "d") {
        //  this.$router.go(0)
        this.$router.replace({
          path: "/show",
          query: {
            inviteCode: "10",
          },
        });
      }
    },
  },
};
</script>
<style>
html,
body,
#app,
.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
}
</style>

<style scoped>
.toptab {
  height: 60px;
  top: 0;
  /* position: absolute; */
  width: 100%;
  line-height: 60px;
  background-color: #1e4d7c00;
  box-shadow: 5px 3px 2px #ccc;
}
.toptab .span {
  left: 30px;
  position: absolute;
  font-family: "Hiragino Sans GB";
  font-size: 22px;
  color: rgba(79, 76, 76, 0.733);
}

.menu {
  left: 250px;
  position: absolute;
  height: 60px;
}

.content {
  width: 100%;
  overflow-x: hidden;
  /* overflow-y: auto; */
  position: absolute;
  top: 60px;
  box-sizing: border-box;
  /* height: 100%; */
}
.search {
  right: 150px;
  position: absolute;
  height: 60px;
  line-height: 60px;
  padding-left: 70px;
}
.el-input {
  width: 280px;
}
.el-input-group__prepend {
  background-color: #ccc;
}

.tiez {
  right: 70px;
  position: absolute;
}

.user {
  right: 0;
  position: absolute;
  height: 60px;
  font-size: 12px;
}

.userimg {
  padding-top: 10px;
  padding-right: 20px;
  height: 60px;
  line-height: 60px;
}
</style>


